﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="1024招聘" />
    <!-- 作者 -->
    <meta name="revised" content="1024招聘" />
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介" />
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
    <title>1024招聘</title>

    <!-- 公共样式 开始 -->
    <link rel="shortcut icon" href="~/images/favicon.ico" />
    <link rel="bookmark" href="~/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="~/css/base.css">
    <link rel="stylesheet" type="text/css" href="~/fonts/iconfont.css">
    <script type="text/javascript" src="~/framework/jquery-1.11.3.min.js"></script>
    <script src="~/js/canvas.js"></script>
    <link rel="stylesheet" type="text/css" href="~/layui/css/layui.css">
    <!--[if lt IE 9]>
        <script src="framework/html5shiv.min.js"></script>
        <script src="framework/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <script src="~/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <link rel="stylesheet" type="text/css" href="~/css/login.css">
    <script type="text/javascript" src="~/js/login.js"></script>
</head>

<body>

    <!--主体 开始-->
    <div class="login_main">
        <!--轮播图 开始-->
        <div class="layui-carousel lbt" id="loginLbt">
            <div carousel-item>
                <div class="item" style="background: url(../images/login_bg1.jpg) no-repeat; background-size: cover;"></div>
                <div class="item" style="background: url(../images/login_bg2.jpg) no-repeat; background-size: cover;"></div>
            </div>
        </div>
        <!--轮播图 结束-->
        <div class="logo">
            <img src="~/images/logo_white.png" width="285" height="62"/>
        </div>
        <div class="form_tzgg">
            <div class="form">
                <form action="" method="post" class="layui-form">
                    <div class="title">用户登录</div>
                    <div class="con" onclick="getFocus(this)">
                        <input type="text" name="adminName" id="user-name" lay-verify="userName" placeholder="请输入您的用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="con" onclick="getFocus(this)">
                        <input type="password" name="adminPwd" id="password" required lay-verify="passWord" placeholder="请输入您的账户密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <input type="text" name="code" id="code" value="" placeholder="请输入验证码" class="layui-input" style="Width:210px;float:left">
                        <canvas id="canvas" width="110" height="38"></canvas>
                    </div>
                    <div class="layui-form-item">
                        <input type="checkbox" name="box" lay-skin="primary" title="记住密码" checked="">
                    </div>
                    <div class="but">
                        <button class="layui-btn" lay-submit lay-filter="submitBut" id="submit">登录</button>
                    </div>
                    <div class="apply"><a href="#">找回密码</a></div>
                </form>
            </div>
            <script>
                layui.use('form', function () {
                    var form = layui.form;
                    form.verify({
                        userName: function (value, item) { //value：表单的值、item：表单的DOM对象
                            if (value == null || value == "") {
                                return '请输入您的用户名！';
                            }
                        },
                        passWord: function (value, item) {
                            if (value == null || value == "") {
                                return '请输入您的账户密码！';
                            }
                        }
                    });
                    
                });

            </script>
            <div class="tzgg">
                <div class="title">通知公告</div>
                <div class="con">
                    <ul>
                        <li><span>05-01</span><a href="#" target="_blank">1024招聘框架升级</a></li>
                        <li><span>02-23</span><a href="#" target="_blank">没有最好的代码，只有最好的思路</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--主体 结束-->
</body>

</html>
<script>

    $(function () {
        //页面加载刷新验证码
        var show_num = [];
        draw(show_num);

        //点击图片刷新验证码
        $("#canvas").on('click', function () {
            draw(show_num);
        })

        layui.use('form', function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            //表单提交
            form.on('submit(submitBut)', function (data) {
                //验证码校验
                var val = $("#code").val().toLowerCase();
                var num = show_num.join("");

                
                if (val == '') {
                    layer.alert('请输入验证码！');
                } else if (val != num) {
                    layer.alert('验证码错误！请重新输入！');
                    $("#code").val('');
                    draw(show_num);
                }
                else {
                   
                    $.ajax({
                        url: "/Login/UserLogin",
                        method: 'post',
                        data: data.field,
                        dataType: 'JSON',
                        success: function (data) {
                            if (data.success) {
                                layer.alert(data.msg);
                              window.location.href = "/Home/Index"
                            }
                            else
                                layer.alert(data.msg);
                        },
                        error: function (data) {

                        }

                    })
                }
                return false;
            });
        });
    });
</script>
